<template>
    <div>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <!--
            :inline="true":行内form表单
            :model="searchForm"  双向绑定的公共前缀
            -->
            <el-form :inline="true" :model="searchForm">
                <el-form-item>
                    <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getDictionaryType">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="dictionarytypes" @row-dblclick="detailtable" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="50">
            </el-table-column>
            <el-table-column prop="name" label="数据字典名" width="200" sortable>
            </el-table-column>
            <el-table-column prop="sn" label="编号" width="200" sortable>
            </el-table-column>
            <el-table-column label="操作" >
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--明细表-->
        <el-drawer
                title="字典明细!"
                :visible.sync="detailVisible"
                direction="rtl"
                size="50%">

            <!--明细工具条-->
            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">

                <!--
            :inline="true":行内form表单
            :model="searchForm"  双向绑定的公共前缀
            -->
                <el-form :inline="true" :model="searchForm">
                    <el-form-item>
                        <el-button type="primary" @click="handleAddDetail">新增</el-button>
                    </el-form-item>
                </el-form>
            </el-col>

            <el-table :data="dictionarydetails">
                <el-table-column property="name" label="数据字典明细" width="200"></el-table-column>
                <el-table-column label="操作">
                    <template scope="scope">
                        <el-button size="small" @click="handleEditDetail(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="handleDelDetail(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--工具条-->
            <el-col :span="24" class="toolbar">
                <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
                <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
                </el-pagination>
            </el-col>

        </el-drawer>



        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--新增/修改界面-->
        <el-dialog :title="title" :visible.sync="addFormVisible" :close-on-click-modal="false">
            <el-form :model="addForm" label-width="150px" :rules="formRules" ref="addForm">
                <el-form-item label="数据字典名称" prop="name">
                    <el-input v-model="addForm.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="数据字典编号" prop="sn">
                    <el-input v-model="addForm.sn" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>

        <!--明细新增/修改界面-->
        <el-dialog :title="titleDetail" :visible.sync="addFormVisibleDetail" :close-on-click-modal="false">
            <el-form :model="addFormDetail" label-width="150px" :rules="formRulesDetail" ref="addFormDetail">
                <el-form-item label="字典明细名" prop="name">
                    <el-input v-model="addFormDetail.name" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisibleDetail = false">取消</el-button>
                <el-button type="primary" @click.native="addSubmitDetail" :loading="addLoading">提交</el-button>
            </div>

        </el-dialog>
    </div>

</template>

<style>
    body {

    }
</style>

<script>
    export default {
        data() {
            return {
                //明细弹出框，默认不可见
                addFormVisibleDetail:false,
                //默认明细弹出框名
                titleDetail:"",
                //默认不显示明细
                detailVisible:false,
                loading:false,
                //默认明细
                dictionarydetails:[],
                //默认table
                table:false,
                //明细校验规则
                formRulesDetail:{
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                    typeId: [
                        { required: true, message: '请输入部门编号', trigger: 'blur' }
                    ]
                },
                //校验规则
                formRules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                    sn: [
                        { required: true, message: '请输入部门编号', trigger: 'blur' }
                    ]
                },
                //默认忙加载
                addLoading: false,
                //明细模态框数据
                addFormDetail:{
                    id:"",
                    name:"",
                    typeId:"",
                },
                //模态框数据
                addForm:{
                    id:"",
                    name:"",
                    sn:"",
                },
                //默认标题
                title:"",
                //模态框默认不显示
                addFormVisible:false,
                //默认当前页
                currentPage:1,
                //列表选中列
                sels:[],
                //每页条数
                pageSize:10,
                //数据总条数
                total:0,
                //高级查询
                searchForm:{
                    "name":"",
                },
                searchdetailForm:{
                    typeId:"",
                },
                //数据字典类型
                dictionarytypes:[],
                //默认忙加载
                listLoading:false,
            }
        },
        methods:{
            //明细编辑按钮
            handleEditDetail(index,row){
                this.titleDetail="修改字典明细";
                //先重置
                if(this.$refs["addFormDetail"]){
                    //当出现了校验规则的时候，才能进行重置
                    this.$refs["addFormDetail"].resetFields();//this.$refs.ruleForm.resetFields()
                }
                //回显
                //回显
                for(var k in this.addFormDetail){
                    this.addFormDetail[k] = row[k];
                }
                this.addFormVisibleDetail=true;
            },
            //明细删除按钮
            handleDelDetail(index,row){
                this.$confirm('您确认离我而去吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.$http.delete("/dictionarydetail/"+row.id).then(res=>{
                        let {success, msg} = res.data;
                        if(success) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            //刷新界面
                            this.loadDictionaryDetail();
                        }else {
                            this.$message.error('沙雕，你居然能出错');
                        };
                    })
                }).then(res=>{

                });
            },
            //双击事件，显示明细框
            detailtable(row){
                this.searchdetailForm.typeId=row.id;
                this.addFormDetail.typeId=row.id;
                this.loadDictionaryDetail();
                this.detailVisible=true;
            },

            //明细添加/修改提交
            addSubmitDetail(){
                //提交form表单之前必须要进行校验
                this.$refs["addFormDetail"].validate((valid) => {
                    //校验通过之后，执行if语句中的内容
                    if (valid) {
                        this.$http.post("/dictionarydetail", this.addFormDetail).then(res => {

                            let {success, msg} = res.data;
                            if(success){
                                //关闭模态框
                                this.addFormVisibleDetail = false;
                                //刷新界面
                                this.loadDictionaryDetail();
                                //刷新上级部门
                            }else{
                                this.$message.error(msg);
                            }
                        });
                    }
                });
            },
            //添加/修改提交
            addSubmit(){
                //提交form表单之前必须要进行校验
                this.$refs["addForm"].validate((valid) => {
                    //校验通过之后，执行if语句中的内容
                    if (valid) {
                        this.$http.post("/dictionarytype", this.addForm).then(res => {
                            let {success, msg} = res.data;
                            if(success){
                                //关闭模态框
                                this.addFormVisible = false;
                                //刷新界面
                                this.loadDictionaryType();
                                //刷新上级部门
                            }else{
                                this.$message.error(msg);
                            }
                        });
                    }
                });
            },
            //当前页变化执行函数
            handleCurrentChange(val){
                this.currentPage=val;
                this.loadDepartments();
            },
            //批量删除
            batchRemove(){
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.$http.patch("/dictionarytype/batchRemove",this.sels).then(res=>{
                        let {success,msg} = res.data;
                        if(success){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            //刷新页面
                            this.loadDictionaryType();
                        }else {
                            this.$message.error('错了哦，这是一条错误消息');
                        };
                    });
                }).catch(() => {

                });
            },
            //添加按钮绑定事件
            handleAdd(){
                //修改标题
                this.title="新增";
                //先重置
                if(this.$refs["addForm"]){
                    //当出现了校验规则的时候，才能进行重置
                    this.$refs["addForm"].resetFields();//this.$refs.ruleForm.resetFields()
                }
                //手动清空form表单
                for(var k in this.addForm){
                    this.addForm[k] = "";
                }
                //弹出模态框
                this.addFormVisible=true;
            },
            //明细添加按钮绑定事件
            handleAddDetail(){
                this.titleDetail="新增字典明细";
                //先重置
                if(this.$refs["addFormDetail"]){
                    //当出现了校验规则的时候，才能进行重置
                    this.$refs["addFormDetail"].resetFields();//this.$refs.ruleForm.resetFields()
                }
                //手动清空form表单
                this.addFormDetail.name="";
                this.addFormDetail.id="";
                this.addFormVisibleDetail=true;
            },
            //高级查询
            getDictionaryType(){
                this.currentPage=1;
                this.loadDictionaryType();
            },
            //查询字典明细加载页面
            loadDictionaryDetail(){
                let param = {"currentPage":this.currentPage,"pageSize":this.pageSize,"typeId":this.searchdetailForm.typeId};
                this.$http.patch("/dictionarydetail",param).then(res=>{
                    this.dictionarydetails=res.data.list
                    this.total=res.data.total;
                }).catch(res=>{

                });
            },
            //查询字典类型加载页面
            loadDictionaryType(){
                let param = {"currentPage":this.currentPage,"pageSize":this.pageSize,"name":this.searchForm.name};
                this.$http.patch("/dictionarytype",param).then(res=>{
                    this.dictionarytypes=res.data.list
                    this.total=res.data.total;
                }).catch(res=>{

                });
            },
            //给删除按钮绑定事件
            handleDel(index,row){
                this.$confirm('您确认离我而去吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.$http.delete("/dictionarytype/"+row.id).then(res=>{
                        let {success, msg} = res.data;
                        if(success) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            //刷新界面
                            this.loadDictionaryType();
                        }else {
                            this.$message.error('错了哦，这是一条错误消息');
                        };
                    })
                }).then(res=>{

                });
            },
            //给编辑按钮绑定事件
            handleEdit(index,row){
                //修改标题
                this.title="修改";
                //先重置
                if(this.$refs["addForm"]){
                    //当出现了校验规则的时候，才能进行重置
                    this.$refs["addForm"].resetFields();//this.$refs.ruleForm.resetFields()
                }
                //回显
                for(var k in this.addForm){
                    this.addForm[k] = row[k];
                }
                //弹出模态框
                this.addFormVisible=true;
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            //页码发生改变的时候触发此函数
            handleCurrentChange(val){
                //修改当前页
                this.currentPage = val;
                //再来分页查询
                this.loadDepartments();
            }
        },
        mounted(){
            //加载分页数据
            this.loadDictionaryType();
        }
    }
</script>